// pages/square/square.js
Page({
      data: {
        showTips: true, //初始位置选择提示状态
        showAreaPopup: false, //区域弹出层状态
        selectedAreas: [], // 区域列表
        categoryList: [], // 栏目列表
        activeTab: 1, //默认选中栏目序号
        messageList: [], // 初始为空数组
        isLoading: false,
        hasMore: true,
        page: 1,
        pageSize: 8,
        isCollected: false,// 默认未收藏
        isOffTiped: false // 默认未收藏
      },

      // 初始化加载数据
      onLoad() {
        this.getStorageSelectedAreas();
        this.loadCategoryData();
        this.loadData(); //todo 重点完善改造内容
      },

      getStorageSelectedAreas() {
        // 将客户端缓存中的选中区域，回填到selectedAreas
        try {
          this.setData({
            selectedAreas: wx.getStorageSync('selectedAreas') || [],
          });
        } catch (e) {
          console.error('读取selectedAreas缓存失败', e);
        }
        // 如果selectedAreas中没数据，就显示选择区域位置tips
        this.setData({
          showTips: !this.data.selectedAreas || this.data.selectedAreas.length === 0
        });
      },

      // 滚动到底部加载更多
      onReachBottom() {
        this.loadData();
      },

      // 展示区域弹出层
      showAreaPopup() {
        this.setData({
          showAreaPopup: true,
        });
      },
      // 关闭区域弹出层
      closeAreaPopup() {
        this.setData({
          showAreaPopup: false
        });
      },
      // 监听区域选择组件的事件函数
      onSelectedArea(event) {
        // console.log(event.detail)
        this.setData({
          selectedAreas: event.detail.comSelectedAreas,
        });
        // 保存selectedAreas更新到本地缓存
        try {
          wx.setStorageSync('selectedAreas', this.data.selectedAreas)
        } catch (e) {
          console.error('更新selectedAreas缓存失败', e);
        }
        // 如果selectedAreas中没数据，就显示选择区域位置tips
        this.setData({
          showTips: !this.data.selectedAreas || this.data.selectedAreas.length === 0
        });
        // console.log(this.data.selectedAreas)
      },
      // 监听区域tag关闭（取消）事件
      tagClose(event) {
        const name = event.currentTarget.dataset.name;
        this.setData({
          selectedAreas: this.data.selectedAreas.filter(tag => tag !== name)
        });
        // 保存selectedAreas更新到本地缓存
        try {
          wx.setStorageSync('selectedAreas', this.data.selectedAreas)
        } catch (e) {
          console.error('更新selectedAreas缓存失败', e);
        }
        // 如果selectedAreas中没数据，就显示选择区域位置tips
        this.setData({
          showTips: !this.data.selectedAreas || this.data.selectedAreas.length === 0
        });
      },

      // 监听tab切换事件
      tabChange(event) {
        wx.showToast({
          title: `切换到标签 ${event.detail.name}`,
          icon: 'none',
        });
      },

      // 加载栏目数据
      loadCategoryData() {
        this.setData({
          categoryList: [{
            code: "zgz",
            name: "找工作"
          }, {
            code: "zg",
            name: "招工"
          }, {
            code: "zdd",
            name: "找订单"
          }, {
            code: "wfdd",
            name: "外发订单"
          }, {
            code: "zf",
            name: "找住房"
          }, {
            code: "fwcz",
            name: "出租住房"
          }, {
            code: "zg",
            name: "找厂房"
          }, {
            code: "zg",
            name: "出租厂房"
          }, {
            code: "zg",
            name: "二手市场"
          }, {
            code: "zg",
            name: "广告推广"
          }]
        });
      },

      toggleCollect() {
        const newValue = !this.data.isCollected;
        this.setData({
          isCollected: newValue
        });
        
        // 可以添加异步操作
        wx.showToast({
          title: newValue ? '已收藏' : '已取消',
          icon: 'none'
        });
      },

      toggleOffTip() {
        const newValue = !this.data.isOffTiped;
        this.setData({
          isOffTiped: newValue
        });
        
        // 可以添加异步操作
        wx.showToast({
          title: newValue ? '已举报' : '已取消',
          icon: 'none'
        });
      },

      // 加载数据
      loadData() {
        if (this.data.isLoading || !this.data.hasMore) return;
        this.setData({
          isLoading: true
        });

        // 模拟网络请求
        setTimeout(() => {
          const newData = this.getMockData(this.data.page, this.data.pageSize);
          if (newData.length === 0) {
            this.setData({
              hasMore: false,
              isLoading: false
            });
            return;
          }
          this.setData({
            messageList: [...this.data.messageList, ...newData],
            page: this.data.page + 1,
            isLoading: false
          });
        }, 800);
      },

      // 模拟数据
      getMockData(page, pageSize) {
        const mockData = [{
            areaName: "大石",
            categoryName: "招工",
            title: "新厂招工",
            content: "车位：15名\n四线：3名\n冚车：1名\n裁床：2名\n每月10号发薪，过节有福利。\n欢迎带组进场，联系电话：13499585855\n请互相推荐",
            image: "",
            collects: 128,
            tipOffs: 4
          }, {
            areaName: "大塘",
            categoryName: "招工",
            title: "招工",
            content: "车位：10名\n四线：2名\n每月15号准时发薪，餐补400，住房补贴300，有节日福利，做满半年，年底有奖励。\n联系电话：13445666665\n常年有订单，欢迎转发推荐。",
            image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 95,
            tipOffs: 4
          }, {
            areaName: "塘步东",
            categoryName: "找工作",
            title: "车位找工作",
            content: "本人有15年工作经验，针织和梭织都擅长，工作积极，质量好，随时到岗\n联系电话：13499585855\n需要招工的老板快联系我",
            image: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 5,
            tipOffs: 0
          }, {
            areaName: "大源",
            categoryName: "外发订单",
            title: "订单外发",
            content: "本厂对接亚马逊客户大量订单，除本厂生产外，还有大量裁片外发，订单稳定，价格美好，欢迎咨询\n联系电话：13499585855",
            image: "https://images.unsplash.com/photo-1547658719-da2b51169166?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 9,
            tipOffs: 1
          }, {
            areaName: "南村",
            categoryName: "出租厂房",
            title: "工厂转让",
            content: "本工厂位于南村牌坊附近，面积有500多平，位置绝佳，设备齐全。由于生意需要，将回老家发展，现整体转让，有兴趣电联\n联系电话：13499585855",
            image: "",
            collects: 19,
            tipOffs: 0
          }, {
            areaName: "员岗",
            categoryName: "出租住房",
            title: "房屋出租",
            content: "员岗优质房源，有单间、一室一厅、两室一厅，价格美好，房东nice，可半年起租，押一付一，民水民电。欢迎咨询入住\n联系电话：13322225555",
            image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 11,
            tipOffs: 0
          }, {
            areaName: "洛溪",
            categoryName: "二手市场",
            title: "物品转卖",
            content: "本人因为离开广州，有租房自购的电冰箱1台，空调1台，电动车一辆需要转售，价格好谈。\n位置在洛溪南国花园,有意者电联\n联系电话：13499585855",
            image: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 1,
            tipOffs: 0
          },
          {
            areaName: "大石",
            categoryName: "招工",
            title: "新厂招工",
            content: "车位：15名\n四线：3名\n冚车：1名\n裁床：2名\n每月10号发薪，过节有福利。\n欢迎带组进场，联系电话：13499585855\n请互相推荐",
            image: "",
            collects: 128,
            tipOffs: 4
          }, {
            areaName: "大塘",
            categoryName: "招工",
            title: "招工",
            content: "车位：10名\n四线：2名\n每月15号准时发薪，餐补400，住房补贴300，有节日福利，做满半年，年底有奖励。\n联系电话：13445666665\n常年有订单，欢迎转发推荐。",
            image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 95,
            tipOffs: 4
          }, {
            areaName: "塘步东",
            categoryName: "找工作",
            title: "车位找工作",
            content: "本人有15年工作经验，针织和梭织都擅长，工作积极，质量好，随时到岗\n联系电话：13499585855\n需要招工的老板快联系我",
            image: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 5,
            tipOffs: 0
          }, {
            areaName: "大源",
            categoryName: "外发订单",
            title: "订单外发",
            content: "本厂对接亚马逊客户大量订单，除本厂生产外，还有大量裁片外发，订单稳定，价格美好，欢迎咨询\n联系电话：13499585855",
            image: "https://images.unsplash.com/photo-1547658719-da2b51169166?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 9,
            tipOffs: 1
          }, {
            areaName: "南村",
            categoryName: "出租厂房",
            title: "工厂转让",
            content: "本工厂位于南村牌坊附近，面积有500多平，位置绝佳，设备齐全。由于生意需要，将回老家发展，现整体转让，有兴趣电联\n联系电话：13499585855",
            image: "https://images.unsplash.com/photo-1579403124614-197f69d8187b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 19,
            tipOffs: 0
          }, {
            areaName: "员岗",
            categoryName: "出租住房",
            title: "房屋出租",
            content: "员岗优质房源，有单间、一室一厅、两室一厅，价格美好，房东nice，可半年起租，押一付一，民水民电。欢迎咨询入住\n联系电话：13322225555",
            image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 11,
            tipOffs: 0
          }, {
            areaName: "洛溪",
            categoryName: "二手市场",
            title: "物品转卖",
            content: "本人因为离开广州，有租房自购的电冰箱1台，空调1台，电动车一辆需要转售，价格好谈。\n位置在洛溪南国花园,有意者电联\n联系电话：13499585855",
            image: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600",
            collects: 1,
            tipOffs: 0
          }];

          const start = (page - 1) * pageSize;
          const end = page * pageSize;
          if (start >= mockData.length) {
            return [];
          }
          return mockData.slice(start, Math.min(end, mockData.length));
        }

      });